<html>
	<head>
	<link href="{{ STATIC_URL }}styles.css" rel="stylesheet" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
	<link rel="icon" href="{{ STATIC_URL }}images/icon.ico" />
	<script type="text/javascript" src="{{ STATIC_URL }}jquery.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}stupidtable.min.js"></script>
	<script type="text/javascript">
		// this is for loading the stupid table
		$(function(){
			$("#simpleTable").stupidtable();
		});
		// all this code is for searching the table	
		$(document).ready(function()
		{
			$('#search').keyup(function()
			{
				searchTable($(this).val());
			});
		});
		function searchTable(inputVal)
		{
			var table = $('#simpleTable')
			table.find('tr').each(function(index, row)
			{
				var allCells = $(row).find('td');
				if(allCells.length > 0)
				{
					var found = false;
					allCells.each(function(index, td)
					{
						var regExp = new RegExp(inputVal, 'i');
						if(regExp.test($(td).text()))
						{
							found = true;
							return false;
						}
					});
					if(found==true)
						$(row).show();
					else
						$(row).hide();
				}
			});
		}
		// when the user selects a conference from the front page, redirect them to 
		// the appropriate conference profile
		function clickedit (input){
			window.location = "/conference/" + input.innerHTML;
		}
	</script>
	</head>
<body>
<div id="headWrap">
 <div id="headpanel">
  <div id="menu">
   <ul>
    <li><a href="/">Home</a></li>
    <li><div class="gap"></div></li>
	{% if not loggedin %}
    <li><a href="/login/">Login</a></li>
	{% else %}
	<li><a href="/profile/">Profile</a></li>
	{% endif %}
    <li><div class="gap"></div></li>
    <li><a href="/about/">About</a></li>
   </ul>
  </div>
 </div>
</div>
<div id="contentWrap">
 <div id="contentPanel">
 	<div id="leftpanel">
		<div class="buf">
		</div>
	</div>
 	<div id="middlepanel">
		<div class="chart">
   			<h2>Public Conferences</h2>
			<label for="search"></label>
			<input size="20" type="text" id="search"/>
			<table id="simpleTable"> 
			  <thead>
			    <tr>
				<th class="type-string">Conference</th>
				<th class="type-string">Company</th>
				<th class="type-string">Location</th>
				<th class="type-string">Date</th>
				<th class="type-int">Room</th>
				</tr>
			  </thead>
			  <tbody>
    			{% for c in conferences %} 
				<tr onmouseover="this.className='highlight'"
				    onmouseout="this.className='normal'"
					onclick="clickedit(this.cells[0])">
					<td>{{ c.name }}</td>
					<td>{{ c.company }}</td>
					<td>{{ c.location }}</td>
					<td>{{ c.date }}</td>
					<td>{{ c.room }}</td>
				</tr>
				{% endfor %}
			  </tbody>
			 </table>
		</div>
	</div>
</div>
<div id="footWrap">
 <div id="footPanel">
  <p>© Wype 2012. All Rights Reserved.</p>
 </div>
</div>
</body>
</html>
